
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  line-height: 1.5;
  background-color: #f6f6f6;
  color: #343434;
  -webkit-font-smoothing: subpixel-antialiased;
  font-feature-settings: 'tnum';
}

a {
  color: var(--theme-primary);
  text-decoration: none;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

img {
  vertical-align: middle;
}

.in,
.out {
  &-enter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform .3s linear;
  }

  &-exit {
    transition: transform .3s linear;
  }

  &-appear {
    transition: opacity .3s linear;
    opacity: 0;

    &-active {
      opacity: 1;
    }
  }
}

.in {
  &-enter {
    transform: translateX(-100px);

    &-active {
      transform: translateX(0);
    }
  }

  &-exit {
    transform: translateX(0);

    &-active {
      transform: translateX(-100px);
    }
  }
}

.out {
  &-enter {
    transform: translateX(100%);
    z-index: 100;

    &-active {
      transform: translateX(0);
    }
  }

  &-exit {
    transform: translateX(0);

    &-active {
      transform: translateX(100%);
    }
  }
}
